<div class="l-wrapper">
    <button class="btn btn-black l-close" (click)="onClose(); formDir.resetForm();"><i class="fas fa-times"></i>
    </button>
    <h1>{{editAlarm ? 'Edit Alarm' : 'Add Alarm'}}</h1>
    <form [formGroup]="alarmForm" #formDir="ngForm" (ngSubmit)="onCreateOrUpdate()">
        <div class="l-form-grid">
            <div>
                <div class="l-form-label">
                    {{i18nLabel.CHECKER_LABEL}}
                    <span class="l-required-icon">*</span>
                    <button type="button" class="fas fa-question-circle" (click)="onShowHelp($event.target)"></button>
                </div>
                <select class="l-select" formControlName="checkerName" required>
                    <option value="">Select rule</option>
                    <option *ngFor="let checker of checkerList" [value]="checker">{{checker}}</option>
                </select>
                <span class="fas fa-angle-down"></span>
                <pp-form-field-error-message
                        [control]="alarmForm.get('checkerName')"
                        [errorMessage]="i18nFormGuide['checkerName']">
                </pp-form-field-error-message>
            </div>
            <div>
                <div class="l-form-label">{{i18nLabel.USER_GROUP_LABEL}} <span class="l-required-icon">*</span></div>
                <select class="l-select" formControlName="userGroupId" required>
                    <option value="">Select user group</option>
                    <option *ngFor="let userGroup of userGroupList" [value]="userGroup">{{userGroup}}</option>
                </select>
                <span class="fas fa-angle-down"></span>
                <pp-form-field-error-message
                        [control]="alarmForm.get('userGroupId')"
                        [errorMessage]="i18nFormGuide['userGroupId']">
                </pp-form-field-error-message>
            </div>
            <div>
                <div class="l-form-label">{{i18nLabel.THRESHOLD_LABEL}} <span class="l-required-icon">*</span></div>
                <input type="number" id="threshold" class="l-input" formControlName="threshold" required>
                <pp-form-field-error-message
                        [control]="alarmForm.get('threshold')"
                        [errorMessage]="i18nFormGuide['threshold']">
                </pp-form-field-error-message>
            </div>
            <div>
                <div class="l-form-label">{{i18nLabel.TYPE_LABEL}}</div>
                <select class="l-select" formControlName="type">
                    <option value="all">All</option>
                    <option value="email">Email</option>
                    <option value="sms">SMS</option>
                    <option *ngIf="webhookEnable" value="webhook">Webhook</option>
                    <option value="none">None</option>
                </select>
                <span class="fas fa-angle-down"></span>
            </div>
        </div>
        <ng-container *ngIf="webhookEnable">
            <div class="l-form-webhook-wrap">
                <div class="l-form-label">Webhook</div>
                <div class="l-form-webhook-container" [style.overflow-y]="webhookListScroll">
                    <div class="l-form-webhook-list">
                        <pp-alarm-rule-webhook-list
                                *ngFor="let webhook of webhookList"
                                [webhook]="webhook"
                                [checkedWebhookList]="checkedWebhookList"
                                (outCheckWebhook)="onCheckWebhook($event)">
                        </pp-alarm-rule-webhook-list>
                    </div>
                    <div class="l-form-webhook-guide-wrap" [style.display]="webhookList.length ? 'none' : 'block'">
                        <div class="l-form-webhook-guide">
                            No Registered Webhook<br><br>
                            If you want to register webhook, <br>
                            go to <a routerLink="/config/webhook">webhook configuration page</a>.
                        </div>
                    </div>
                    <pp-loading [showLoading]="showWebhookLoading" [zIndex]="20"></pp-loading>
                    <pp-film-for-disable *ngIf="disableWebhookList || isWebhookSelectDisable" [zIndex]="9"
                                         [marginWidth]="0" [height]="9999"></pp-film-for-disable>
                </div>
            </div>
        </ng-container>
        <div class="l-form-textarera-wrap">
            <div class="l-form-label">{{i18nLabel.NOTES_LABEL}}</div>
            <textarea id="notes" class="l-textarea" formControlName="notes"></textarea>
        </div>
        <button type="submit" class="btn btn-blue l-create">OK</button>
    </form>
</div>
